<template>
	<div class="flex_column">
		<van-nav-bar
			title="我的打卡"
			left-text="返回"
			left-arrow
			placeholder
			@click-left="onClickLeft"
			fixed
			v-if="usersShare"
		/>
		<ul>
			<li v-for="(item, index) in usersShareData.data" :key="index">
				<!-- 用户头像、昵称、日期begin -->
				<div class="UserInfo">
					<div class="Avatar">
						<img class="left_returnImg" :src="`https://picsum.photos/360/360?random=${index}`" alt="" />
					</div>
					<span class="User_Name">{{ item.name }}</span>
					<span class="User_Date">2022-05-27</span>
				</div>
				<!-- 用户头像、昵称、日期end -->

				<p>{{ item.content }}</p>

				<!-- 图片begin -->
				<div class="pic_box">
					<img :src="item.img" alt="" @click="ImagePreviewFn(item.img)" />
				</div>
				<!-- 图片end -->

				<!-- 底部按钮begin -->
				<div class="Item_Box" @click="likeShare">
					<div class="Like_Box">
						<img src="@/assets/images/赞.png" alt="" />
					</div>
					<span>{{ parseInt(Math.random() * 1000) + parseInt(Math.random()) }}</span>
					<span>评论</span>
					<span>···</span>
				</div>
				<!-- 底部按钮end -->
			</li>
		</ul>
		<div v-if="usersShare">
			<i style="font-size: 30px" class="iconfont icon-jiahao1 radiusShare" @click="addUserShare"></i>
		</div>
	</div>
</template>

<script>
import { ImagePreview } from 'vant';

import { getShareData } from '@/api/share.js';
export default {
	name: 'UserShareContent',
	components: {
		[ImagePreview.Component.name]: ImagePreview.Component,
	},
	created() {
		this.getShareData();
	},
	data() {
		return {
			usersShare: false, // 判断是否在首页的用户打卡圈
			usersShareData: [],
		};
	},
	methods: {
		onClickLeft() {
			this.$router.push('/');
		},
		/** @method 获取分享数据 */
		async getShareData(page = 10) {
			this.usersShare = true;
			this.usersShareData = await getShareData(page);
		},
		/** @method 图片放大 */
		ImagePreviewFn(img) {
			ImagePreview({
				images: [img],
				closeable: true,
			});
		},
		/** @method 点赞分享 */
		likeShare() {
			if (this.$store.state.isLogin) {
				this.$toast('点赞成功');
			} else {
				this.$toast('请先登录');
				setTimeout(() => {
					this.$router.push('/userLogin');
				}, 1000);
			}
		},
		/** @method 新增用户打卡 */
		addUserShare() {
			if (this.$store.state.isLogin) {
				this.$router.push('/userShareAdd');
			} else {
				this.$router.push('/userLogin');
			}
		},
	},
};
</script>

<style scoped>
.flex_column {
	display: flex;
	flex-direction: column;
	padding: 20px 20px;
}
/* 用户头像、昵称、日期begin */
ul li {
	margin-bottom: 50px;
}
ul li .UserInfo {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
ul li .UserInfo .User_Name {
	font-size: 14px;
	flex: 1;
}
ul li .UserInfo .User_Date {
	font-size: 12px;
	color: #aaa;
}

ul li .UserInfo .Avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin-right: 10px;
	border: 1px solid #ccc;
}
ul li .UserInfo .Avatar img {
	width: 100%;
	border-radius: 50%;
}
/* 用户头像、昵称、日期end */

ul li p {
	width: 100%;
	color: #333;
	font-weight: 500;
	font-size: 14px;
	padding-left: 46px;
}

/* 图片begin */
ul li .pic_box {
	width: 80%;
	height: auto;
	border-radius: 10px;
	padding: 10px 0;
	overflow: hidden;
	margin-left: 46px;
}
ul li .pic_box img {
	width: 100%;
	border-radius: 10px;
}
/* 图片end */

/* 底部按钮begin */
ul li .Item_Box {
	display: flex;
	padding-left: 46px;
}

ul li .Item_Box .Like_Box {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
ul li .Item_Box .Like_Box img {
	width: 100%;
}
ul li .Item_Box span {
	line-height: 20px;
	margin-right: 30px;
	font-size: 14px;
	color: #aaa;
	font-weight: 600;
}
/* 底部按钮end */

.radiusShare {
	width: 70px;
	height: 70px;
	position: fixed;
	right: 5%;
	bottom: 5%;
	background-color: #ffd719;
	border-radius: 50%;

	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
